<template>
  <view v-if="cartList.length">
    <!-- 商品列表渲染 -->
    <view class="goods-list">
      <u-swipe-action>
        <u-swipe-action-item v-for="item in cartList" :key="item.goods_id" @click="handel" :options="options1"
          :name="item.goods_id">
          <view class="cart-item">
            <!-- radio 小程序组件库自带的 -->
            <radio @tap="changeSelect(item.goods_id)" :checked="item.goods_select" color="#EB4450" />
            <view class="cart-count">
              <u-number-box @change="valChange" :value="item.goods_count" :name="item.goods_id" />
            </view>
            <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
            <navigator class="goods-item" hover-class="none" :url="`/pages/index/index`">
              <!-- 商品图片 -->
              <image class="goods-image" :src="item.goods_small_logo" mode="aspectFit" />
              <!-- 商品信息 -->
              <view class="goods-info">
                <view class="goods-name">{{ item.goods_name }}</view>
                <view class="goods-price">{{ item.goods_price }}</view>
              </view>
            </navigator>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio @tap="chkHandle" class="select-radio" :checked="isAll" color="#EB4450">
            全选==={{ isAll }}
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ total }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @tap="goPay">去结算({{ totalCount }})</view>
      </view>
    </view>
  </view>
  <!-- 购物车空状态，当购物车列表长度为 0 的时候渲染 -->
  <view v-else :style="{ paddingTop: '10vh' }">
    <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
      <navigator url="/pages/index/index" open-type="switchTab" hover-class="none" :style="{ marginTop: '20rpx' }">
        <u-button type="primary">去首页看看</u-button>
      </navigator>
    </u-empty>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  //
  data () {
    return {
      options1: [{
        text: '收藏',
        style: {
          backgroundColor: '#3c9cff'
        }
      }, {
        text: '删除',
        style: {
          backgroundColor: '#f56c6c'
        }
      }]
    }
  },
  computed: {
    ...mapState(['cartList']),
    ...mapGetters(['isAll', 'total', 'totalCount'])
  },
  methods: {
    ...mapMutations(['setCart']),
    changeSelect (goods_id) {
      console.log(1111);
      // 更改状态
      /* 
      1-根据id查找相同的这一项
      2-将查找到的这一项的状态取反
      3-将数据存到vuex中
      4-需要做持久化 
      */
      const cartList = [...this.$store.state.cartList]
      let objItem = cartList.find(item => item.goods_id == goods_id)
      //  2-将查找到的这一项的状态取反
      objItem.goods_select = !objItem.goods_select
      this.setCart(cartList)
    },
    /* 更改数量 */
    valChange ({ value, name }) {
      // console.log('valChange', e);
      const cartList = [...this.$store.state.cartList]
      let objItem = cartList.find(item => item.goods_id == name)
      //  2-将查找到的这一项的状态取反
      objItem.goods_count = value
      this.setCart(cartList)
    },
    handel ({ index, name }) {
      // console.log(e, "handel");
      /* 
      index:可以判断点击的是收藏还是删除
      name:获取的是当前点击行的id
       */
      if (index == 1) {
        // 删除
        const cartList = [...this.$store.state.cartList]
        var newCartList = cartList.filter(item => item.goods_id !== name)
        this.setCart(newCartList)
      }
    },
    /* 实现反选 */
    chkHandle (e) {
      /* 
      1-获取当前状态===将每一项设置成当前状态值
      2-将数据存到vuex并持久化
      */

      //  浅拷贝：赋值+[...arr]+Object.assign()
      // let bool = this.isAll  // 初始值
      // const cartList = [...this.$store.state.cartList]
      // cartList.forEach(item => {
      //   item.goods_select = !bool  // 1 
      //   // item.goods_select = !this.isAll  // 1   true
      //   // item.goods_select = !this.isAll  // 2  false
      //   // item.goods_select = !this.isAll  // 3 
      //   // item.goods_select = !this.isAll  //4 
      // })
      // // this.setCart(cartList)
      //  深拷贝  JSON.parse(JSON.stringify())
      const cartList = JSON.parse(JSON.stringify(this.$store.state.cartList))
      cartList.forEach(item => {
        item.goods_select = !this.isAll
      })
      this.setCart(cartList)
    },
    goPay () {
      console.log(2222);
      uni.navigateTo({
        url: '../pay/pay'
      })
    }
  }
}
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;

    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }

    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;

      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-price {
        color: #eb4450;

        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;

  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }

  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;

  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    // bottom: 0;
    bottom: var(--window-bottom);
    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;

      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

/* #ifdef H5 */
.bg {
  background-color: #fff;
}

/* #endif */


/* #ifdef mp-weixin */
.bg {
  background-color: red;
}

/* #endif */
</style>
